import React, {useEffect, useState} from 'react';
import ReactECharts from 'echarts-for-react';
import {getUserAnalysisUsingGet} from "@/services/backend/analysisController";

const Top5Book: React.FC = () => {

  const [data, setData] = useState<API.UserAnalysisVO[]>([]);

  useEffect(() => {
    try {
      getUserAnalysisUsingGet().then(res => {
        if (res.data) {
          setData(res.data);
        }
      })
    } catch (e: any) {
    }
  }, [])


  const xData = data.map(item => item.userName)
  const yData = data.map(item => item.allBorrowCount)


  const options = {
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: {
        formatter: function (value: any) {
          if (value.length > 7) {
            return value.substring(0, 7) + '...';
          }
          return value;
        },
        interval: 0
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: yData,
        type: 'bar',
      }
    ]
  };

  return <ReactECharts option={options} />;
};

export default Top5Book;
